<template>
  <div class="content">
    <div class="weatherContent">
      <div
        class="weatherItem"
        v-for="(item, index) in weatherList"
        :key="index"
      >
        <img class="weatherItem-img" :src="item.day_weather_pic" />
        <div class="weatherInfo">
          <div>{{ getDay(item.day) }}</div>
          <div>{{ item.day_weather }}</div>
          <div>
            {{ item.night_air_temperature }}/{{ item.day_air_temperature }}℃
          </div>
        </div>
      </div>
    </div>
    <div id="Weather" class="weather" v-show="weatherShows"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import axios from "axios";
export default {
  name: "SinglePointAnalysis",
  props: {
    node: Object,
    require: false,
  },
  data() {
    return {
      weatherShows: true,
      weatherShow: false,
      weatherList: [],
    };
  },
  mounted() {
    this.getWeatherForecast();
  },
  methods: {
    getDay(str) {
      return (str && str.substring(4)) || "";
    },
    async getWeatherForecast() {
      this.weatherShows = false;
      this.weatherShow = true;
      var myChart = echarts.init(document.getElementById("Weather"));
      await axios
        .get(`/weatherForecast/getWeatherForecast/${this.node.tailingPondId}`)
        .then((res) => {
          console.log(res);
          if (res.data.resultCode == 200) {
            let data = res.data.parameter;
            this.weatherList = [
              data.f1,
              data.f2,
              data.f3,
              data.f4,
              data.f5,
              data.f6,
              data.f7,
            ];
            var lowData = [];
            var highData = [];
            var theDate = [];
            for (let i = 0; i < this.weatherList.length; i++) {
              var obj1 = new Object();
              obj1.value = this.weatherList[i].night_air_temperature;
              lowData[i] = obj1;
              var obj2 = new Object();
              obj2.value = this.weatherList[i].day_air_temperature;
              highData[i] = obj2;
              var obj3 = new Object();
              obj3.value = this.weatherList[i].night_weather;
              theDate[i] = obj3;
            }
            let chartOption = {
              tooltip: {
                trigger: "axis",
                formatter(params) {
                  let tip = params[0].name + "<br/>";
                  for (let y = 0; y < params.length; y++) {
                    tip +=
                      params[y].marker +
                      params[y].seriesName +
                      " : " +
                      params[y].value +
                      " ℃<br/>";
                  }
                  return tip;
                },
              },
              color: ["#00BBFF", "#003C9D"],
              legend: {
                top: 30,
                itemHeight: 2,
                data: [
                  { name: "最低温度", icon: "rect" },
                  { name: "最高温度", icon: "rect" },
                ],
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
              },
              toolbox: {
                feature: {
                  saveAsImage: {},
                },
                right: "5%",
              },
              xAxis: {
                name: "天气",
                nameLocation: "center",
                nameTextStyle: {
                  padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
                },
                type: "category",
                boundaryGap: false,
                data: theDate,
              },
              yAxis: {
                name: "温度" + "℃",
                type: "value",
                // axisLabel: {
                //     formatter: '{value} mm'
                // }
              },

              series: [
                {
                  name: "最低温度",
                  type: "line",
                  data: lowData,
                },
                {
                  name: "最高温度",
                  type: "line",
                  data: highData,
                },
              ],
            };
            myChart.setOption(chartOption);
          }
        });
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
  flex-flow: column;
}
.weatherContent {
  display: flex;
  text-align: center;
  justify-content: space-around;
}
.weatherItem {
  height: 95px;
  width: 68px;
  text-align: center;
}
.weatherItem-img {
  width: 45px;
  height: 45px;
}
.weather {
  width: 465px;
  height: 269px;
  display: inline-block !important;
}
</style>